<template>
  <view
    class="pickerTime"
    style="width: 680rpx; position: absolute; left: 16px"
  >
    <!-- <slot></slot> -->
    <view>
      <picker-view
        indicator-style="height: 50px;"
        style="width: 100%; height: 330px"
        :value="date.year"
        @change="onTimeChange"
      >
        <picker-view-column>
          <view
            v-for="item in years"
            :key="item"
            style="line-height: 50px; text-align: center"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            v-for="item in months"
            :key="item"
            style="line-height: 50px; text-align: center"
            >{{ item }}月</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            v-for="item in days"
            :key="item"
            style="line-height: 50px; text-align: center"
            >{{ item }}日</view
          >
        </picker-view-column>
      </picker-view>
    </view>
    <view> <text @tap.stop="()=>onCancel()">取消</text> <text @tap.stop="onClick" style="float:right">确定</text></view>
  </view>
</template>

<script>
import Vue from "vue";
import Taro from "@tarojs/taro";

export default {
  props: ["onChange", "value", "time","onCancel"],

  data() {
    return {
      date: {
        year: "",
        month: "",
        day: "",
      },
    };
  },
  computed: {
    // 计算属性的 getter
    years: function () {
      // `this` 指向 vm 实例
      const years = [];
      const date = new Date();
      for (let i = 2020; i <= date.getFullYear(); i++) {
        years.push(i);
      }
      return years;
    },
    months: function () {
      // `this` 指向 vm 实例
      const months = [];
      const date = new Date();
      for (let i = 1; i <= 12; i++) {
        months.push(i);
      }
      return months;
    },
    days: function () {
      // `this` 指向 vm 实例
      const days = [];
      const date = new Date();
      for (let i = 1; i <= 31; i++) {
        days.push(i);
      }
      return days;
    },
  },
  mounted() {
    console.log('243')
  },
  methods: {
    onClick() {
      console.log(this.date)
      this.onChange(this.date);
    },
    onTimeChange(e) {
      const val = e.detail.value;

      //       this.setData({
      //   year: this.data.years[val[0]],
      //   month: this.data.months[val[1]],
      //   day: this.data.days[val[2]],
      //   isDaytime: !val[3]
      // })
      this.date = {
        year: this.years[val[0]],
        month: this.months[val[1]],
        day: this.days[val[2]],
      };
      // console.log(date, "eeee");
      // this.onChange(date);
    },
  },
};
</script>
